<template>
    <div ref="chartDom" class="chart-container"></div>
</template>
  
<script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
  import * as echarts from 'echarts/core';
  import type { EChartsOption } from 'echarts';
  
  import variables from '../../variables.less?inline'; 
  
  function getLessVariable(varName: string): string {
      const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
      return match ? match[1].trim() : '#ccc'; 
  }
  
  const chartDom = ref<HTMLElement | null>(null);

  const myChart = shallowRef<echarts.ECharts | null>(null);
  
  const deptNames = [ 
      '党群监察部', '科技教育中心', '发展艺术中心', '视觉艺术中心',
      '校区管理部', '实践教育中心', '财务部', '人力资源部',
      '数字管理部', '办公室'
  ];
  const deptStaffFullTimeData = [12, 8, 20, 15, 25, 14, 6, 18, 10, 4]; 
  const deptStaffPartTimeData = [3, 2, 5, 5, 5, 4, 2, 4, 2, 1]; 
  
  const axisLineColor = getLessVariable('axis-line-color');
  const textColor = getLessVariable('text-color');
  const fullTimeColor = getLessVariable('dept-staff-full-color');
  const partTimeColor = getLessVariable('dept-staff-part-color');
  
  const option: EChartsOption = {
      tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(3, 28, 66, 0.9)',
          borderColor: axisLineColor,
          textStyle: { color: '#fff' },
          formatter: (params: any) => { // Use 'any' or define a stricter type
              let tooltipStr = `${params[0].name}<br/>`;
              let total = 0;
              params.forEach((item: any) => {
                  tooltipStr += `${item.marker}${item.seriesName}: ${item.value}人<br/>`;
                  total += item.value || 0;
              });
              tooltipStr += `总计: ${total}人`;
              return tooltipStr;
          }
      },
      legend: {
          data: ['全职', '兼职'],
          orient: 'vertical',
          right: '2%',
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: textColor, fontSize: 12 }
      },
      grid: {
          left: '3%', right: '15%', bottom: '3%', top: '5%', containLabel: true
      },
      xAxis: {
          type: 'value', axisLabel: { show: false }, axisLine: { show: false },
          axisTick: { show: false }, splitLine: { show: false }
      },
      yAxis: {
          type: 'category', data: deptNames,
          axisLabel: {
              color: textColor, fontSize: 12,
              formatter: (value: string) => value.length > 6 ? value.slice(0, 5) + '...' : value
          },
          axisLine: { show: true, lineStyle: { color: axisLineColor } },
          axisTick: { show: false }, inverse: true
      },
      series: [
          {
              name: '全职', type: 'bar', stack: 'total', barWidth: '50%',
              emphasis: { focus: 'series' }, itemStyle: { color: fullTimeColor },
              label: {
                  show: true, position: 'inside', fontSize: 10, color: '#000',
                  formatter: (params: any) => params.value > 0 ? params.value : ''
              },
              data: deptStaffFullTimeData
          },
          {
              name: '兼职', type: 'bar', stack: 'total', barWidth: '50%',
              emphasis: { focus: 'series' }, itemStyle: { color: partTimeColor },
              label: {
                  show: true, position: 'inside', fontSize: 10, color: '#fff',
                   formatter: (params: any) => params.value > 0 ? params.value : ''
              },
              data: deptStaffPartTimeData
          }
      ]
  };
  
  const resizeChart = () => {
    myChart.value?.resize();
  };
  
  onMounted(() => {
    if (chartDom.value) {
      myChart.value = echarts.init(chartDom.value);
      myChart.value.setOption(option);
      window.addEventListener('resize', resizeChart);
    }
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose(); // Dispose chart instance
  });
  
  </script>
  
  <style lang="less" scoped>
  // .chart-container is defined globally or can be styled here if needed
  .chart-container {
    width: 100%;
    height: 100%; // Make sure it fills the panel content area
  }
  </style>